<template>
  <el-dialog :model-value="visible" title="批量导出工单" width="400px" @close="$emit('close')" @update:model-value="onDialogUpdate">
    <el-form>
      <el-form-item label="导出字段">
        <el-checkbox-group v-model="selectedFields">
          <el-checkbox v-for="f in fields" :key="f.value" :label="f.value">{{ f.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" :disabled="!selectedFields.length" @click="onConfirm">导出</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
  visible: { type: Boolean, required: true },
  fields: { type: Array, required: true }
})
const emit = defineEmits(['confirm', 'close'])
const selectedFields = ref<string[]>([])
watch(() => props.visible, v => { if (v) selectedFields.value = props.fields.map(f => f.value) })
function onConfirm() {
  emit('confirm', selectedFields.value)
}
function onDialogUpdate(val: boolean) {
  if (!val) emit('close')
}
</script> 